import React, { useState, useEffect, useContext } from 'react';
import { Select, Button, Input } from 'antd';
import { SearchOutlined, DiffOutlined } from '@ant-design/icons';
import { ClassRoom } from './NewEmployee';

const { Option } = Select;
let Temp_Dept = "";
class Student
{
    [index: string]: any;
    id: string | undefined;
    name: string | undefined;
    gender: string | undefined;
    classroom: string | undefined;
    bithday: string | undefined;
    hobbit: string | undefined;
    private static _SingleInstance: Student;
    static Getinstance(): Student
    {
        if (this._SingleInstance) return this._SingleInstance;
        this._SingleInstance = new Student();
        return this._SingleInstance;
    }
}
export default function HeaderAction(props: any)
{
    const { EmpDept }: any = useContext(props.MyContext);

    const { EmpName }: any = useContext(props.MyContext);

    const { NewEmpState }: any = useContext(props.MyContext);

    const { EmpData } = useContext(props.MyContext);

    const [Department, setDepartment] = useState([]);

    let student: Student = Student.Getinstance();

    useEffect(() =>
    {
        // try
        // {
        //     fetch("http://localhost/PHP_Pro01/React_Pro01/GetDepartment.php")
        //         .then(response => response.json())
        //         .then(data => setDepartment(data))
        //         .catch(e => console.error(e));
        // }
        // catch (e)
        // {
        //     console.error(e);
        // }
    }, [EmpDept, EmpName]);//依赖,给定的值发生变化才会执行,否则不断执行该Hook

    const onClick = async (e: any) =>
    {
        let name = document.querySelector("#EmpName") as HTMLInputElement;
        if (name.value !== "") student.name = name.value as string;
        let url = 'http://localhost:3065/getStudent';
        let params: string[] = [];
        Object.keys(student).forEach((key, index) =>
        {
            if (student[key] !== undefined)
            {
                if (!url.includes("?"))
                {
                    url += "?";
                }
                params.push(`${key}=${student[key]}`);
            }
        });
        url += params.join("&");
        let response = await fetch(url);
        EmpData[1](await response.json());
    };
    return (
        <div className='HeaderAction'>
            <Button icon={<DiffOutlined />} size="large" style={{ marginRight: '20px' }} onClick={() => { NewEmpState[1](true); }}>New Employee</Button>
            <Input id='EmpName' size='large' placeholder="Enter Name Here" style={{ width: "300px", marginRight: "10px" }} autoComplete='off' />
            <Select
                id="department"
                onChange={(e) => { student.classroom = e as string; }}
                style={{ width: 200 }}
                placeholder="Select a Department"
                size='large'
                allowClear
            >
                {
                    ClassRoom.map((item, index) =>
                    {
                        return (
                            <Option value={item['class_name']} key={index}>{item['class_name']}</Option>
                        );
                    })
                }
            </Select>
            <Select id="gender" size='large' placeholder='Gender' allowClear
                onChange={(e) => { student.gender = e as string; }}
            >
                <Option value='男'>男</Option>
                <Option value='女'>女</Option>
            </Select>
            <Button style={{ marginLeft: "20px" }} size="large" id="search" icon={<SearchOutlined />} onClick={onClick}>Search</Button>
        </div>
    );
}
